<template>
    <view class="swiper-box">
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
                           <image class="slide-img" :src="item.imageUrl" mode="" lazy-load="true"></image>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		props:['bannerList'],
	    data() {
	        return {
	            indicatorDots: true,
	            autoplay: true,
	            interval: 2000,
	            duration: 500,
				/* banner: [] */
	        }
	    },  
		created() {
			this.getBanner()
		},
	    methods: {
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        },
			getBanner(){//这里不建议写箭头函数，this拿不到data
				/* uni.request({
					url:'http://47.100.48.11:4000/banner',
					success:(res)=>{
						if(res.data.code == 200){
							let list = res.data.banners
							this.banner = list.splice(5,9)//取4个
						}
					}
				}) */
			}
	    }
	}
</script>

<style lang="scss">
	.swiper-box{
		width: 100%;
		height: 322upx;
		.swiper{
			.page-section-spacing{
				border-radius: 10upx;
			}
			border-radius: 100upx;
			padding: 0 1%;
			height: 322upx;
			.swiper-item{
				width: 100%;
				border-radius: 10upx;
				overflow: hidden;
				height: 100%;
				.slide-img{
					border-radius: 10upx;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>